<template>
  <div id="weight-stat">
    <div class="group group1">
      <div class="title">
        排放来源构成
      </div>
      <div class="content-box">
        <div class="page">
          <HeatPiePage :pieunit="pieunit1" :dataList="pfSource"></HeatPiePage>
        </div>
        <div class="list">
          <div class="item" v-for="(item,index) in pfSource" :key="index">
            <div class="img"></div>
            <div class="item-data">
              <span>{{ item.value }}</span>
              <span>{{ item.name }}{{ pieunit2 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="group group2">
      <LinePage
        :LinePageDate="LinePageDate"
        titleText="近七天车辆流量变化"
        titleColor="#f0f6fb"
        :titleSize="22"
        :textUnit="textUnit"
        :Name="Name"
      ></LinePage>
    </div>
    <div class="group group3">
      <div class="title">
        重量统计
      </div>
      <div class="content-box">
        <div class="page">
          <HeatPiePage :pieunit="pieunit2" :dataList="pfZl"></HeatPiePage>
        </div>
        <div class="list">
          <div class="item" v-for="(item,index) in pfZl" :key="index">
            <div class="img"></div>
            <div class="item-data">
              <span>{{ item.value }}</span>
              <span>{{ item.name }}{{ pieunit2 }}</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { getPfInTime, getVehicleNumInTime , getVehicleNumTonInTime} from '@/api/largescreen/index.js'
import { mapState } from 'vuex'
import LinePage from '@/components/Myecharts/LinePage'
import HeatPiePage from '@/components/Myecharts/HeatPiePage'
export default {
  name: 'weightStat',
  components: {
    LinePage,
    HeatPiePage
  },
  data() {
    return {
      /*排放来源构成*/
      pfSource: [],
      pieunit1:'',
      /*七天车辆*/
      LinePageDate: {
        lpweek: [],
        carnum: []
      },
      textUnit: ['辆'],
      Name: ['车辆数量'],
      /*重量统计*/
      pfZl: [],
      pieunit2:'(吨)',
    }
  },
  computed: {
    ...mapState({
      hotsportCode: state => state.map.hotsportCode
    })
  },
  mounted() {
  },
  methods: {
    proFormat1(number) {
      return this.myfun.myformat(number)
    },
    proFormat2(num) {
      if (num <= 1) {
        num = Math.abs(num)
        return num.toFixed(3)
      } else {
        return num.toFixed(2)
      }
    },
    GetPfInTime(newArry){
      getPfInTime({
        regionType:newArry[0],
        regionId:newArry[1],
        timeType:'hour',
      })
        .then(res => {
          let data = res.data
          let arry = []
          for (let k in data){
            let obj = {}
            obj.name = k
            obj.value = data[k]
            arry.push(obj)
          }
          this.pfSource = arry
        }) 
        .catch(err => {
          console.log(err)
        })
    },
    GetVehicleNumInTime(newArry){
      getVehicleNumInTime({
        regionType:newArry[0],
        regionId:newArry[1],
        timeType:'day',
      })
        .then(res => {
          let data = res.data
          let lpweek = []
          let carnum = []
          for (let k in data){
            let week = this.myfun.getWeek(k)
            lpweek.push(week)
            carnum.push(data[k])
          }
          this.LinePageDate.lpweek = lpweek
          this.LinePageDate.carnum = carnum
        })
        .catch(err => {
          console.log(err)
        })
    },
    GetVehicleNumTonInTime(newArry){
      getVehicleNumTonInTime({
        regionType:newArry[0],
        regionId:newArry[1],
      })
        .then(res => {
          let data = res.data
          let arry = []
          for (let k in data){
            let obj = {}
            let name = ''
            if(k.length > 2){
              name = k.slice(0,2)+'-'+k.slice(2)
            }else {
              name = k
            }
            obj.name = name
            obj.value = data[k]
            arry.push(obj)
          }
          this.pfZl = arry
        })
        .catch(err => {
          console.log(err)
        })
    },
  },
  watch: {
    hotsportCode: {
      deep: true,
      handler(newValue, oldValue) {
        this.GetPfInTime(newValue)
        this.GetVehicleNumInTime(newValue)
        this.GetVehicleNumTonInTime(newValue)
      }
    }
  }
}
</script>

<style scoped lang="scss">
#weight-stat {
  width: 572px;
  height: 100%;
  margin: 0px auto;
  box-sizing: border-box;
  padding-top: 10px;

  .group {
    width: 100%;
    margin-bottom: 40px;

    &:last-child {
      margin-bottom: 0px;
    }

    .title {
      width: 100%;
      font-size: 22px;
      color: #edf4fa;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 24px;
    }
    .content-box{
      width: 100%;
      display: flex;
      align-items: center;
      .page {
        width: 185px;
        height: 185px;
        margin-right: 45px;
      }
    }
  }

  .group1 {
    height: 240px;

    .content-box {
      height: 187px;
      .list {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .item {
          box-sizing: border-box;
          padding: 0px 10px;
          width: 50%;
          height: 50px;
          display: flex;
          align-items: center;

          .img {
            width: 50px;
            height: 50px;
            margin-right: 20px;
            background-size: contain;
          }

          .item-data {
            flex: 1;
            height: 100%;
            span{
              display: block;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:nth-child(1){
                font-size: 22px;
                color: #f0f6fb;
                line-height: 1;
                margin-bottom: 12px;
              }
              &:nth-child(2){
                font-size: 14px;
                color: #7983a2;
                line-height: 1;
              }
            }
          }
          &:nth-child(1){
            .img{
              background: url("~@/assets/image/pf-source-g3.png") no-repeat center center;
            }
          }
          &:nth-child(2){
            .img{
              background: url("~@/assets/image/pf-source-g4.png") no-repeat center center;
            }
          }
          &:nth-child(3){
            .img{
              background: url("~@/assets/image/pf-source-g5.png") no-repeat center center;
            }
          }
          &:nth-child(4){
            .img{
              background: url("~@/assets/image/pf-source-g6.png") no-repeat center center;
            }
          }
        }
      }
    }
  }

  .group2 {
    width: 100%;
    height: 260px;
  }

  .group3 {
    height: 310px;
    .content-box {
      height: 255px;

      .list {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .item {
          box-sizing: border-box;
          padding: 0px 10px;
          width: 50%;
          height: 50px;
          display: flex;
          align-items: center;

          .img {
            width: 50px;
            height: 50px;
            margin-right: 20px;
            background-size: contain;
          }

          .item-data {
            flex: 1;
            height: 100%;
            span{
              display: block;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:nth-child(1){
                font-size: 22px;
                color: #f0f6fb;
                line-height: 1;
                margin-bottom: 12px;
              }
              &:nth-child(2){
                font-size: 14px;
                color: #7983a2;
                line-height: 1;
              }
            }
          }
          &:nth-child(1){
            .img{
              background: url("~@/assets/image/pf-zz1.png") no-repeat center center;
            }
          }
          &:nth-child(2){
            .img{
              background: url("~@/assets/image/pf-zz2.png") no-repeat center center;
            }
          }
          &:nth-child(3){
            .img{
              background: url("~@/assets/image/pf-zz3.png") no-repeat center center;
            }
          }
          &:nth-child(4){
            .img{
              background: url("~@/assets/image/pf-zz4.png") no-repeat center center;
            }
          }
          &:nth-child(5){
            .img{
              background: url("~@/assets/image/pf-zz5.png") no-repeat center center;
            }
          }
        }
      }
    }
  }
}
</style>
